<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <link rel="stylesheet" href="../../../railView/css/railbox.css" type="text/css" />
    <script type="text/javascript" src="../../../railView/js/railbox-2.0.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/UUID.js"></script>
    <style>
        #buttom-container {
            position: absolute;
            top: 4px;
            left: 45px;
            z-index: 99;
        }
        .button {
            padding: 0 10px;
            min-width: 54px;
            height: 30px;
            line-height: 30px;
            margin: 4px;
            text-align: center;
            border-radius: 3px;
            border: none;
            cursor: pointer;
            background: rgba(34, 45, 50, 0.7);
            color: #FFFFFF;
        }
        .button:hover {
            background: rgb(34, 45, 50);
        }
        #oprate-container {
            z-index: 99;
            position: absolute;
            top: 40px;
            left: 48px;
            border-radius: 3px;
            box-shadow: 0 0 10px rgba(34, 45, 50, 0.7);
            display: none;
        }
        #oprate-container > .oprate-content {
            padding: 20px 30px;
        }
        .oprate-item {
            color: #676767;
            padding-bottom: 10px;
        }
        .oprate-item:last-child {
            padding-bottom: 0;
        }
        .oprate-item > span {
            color: black;
        }
        .input {
            height: 25px;
            line-height: 25px;
            background-color: #fff;
            border: 2px solid #e6e6e6;
            border-radius: 3px;
            color: #999999;
        }
        .input:focus {
            outline: 0;
            box-shadow: 0px 0px 5px rgb(34 45 50);
        }
        .head {
            display: flex;
            justify-content: space-between;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #999999;
            background-color: #45a3ff;
            box-sizing: border-box;
            padding: 0 10px;
            position: relative;
            color: #FFFFFF;
        }
        .head>span:last-child {
            cursor: pointer;
            color: #45a3ff;
            font-size: 12px;
            height: 18px;
            width: 18px;
            line-height: 18px;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            right: 3%;
            transform: translateY(-50%);
            background: #FFFFFF
        }
        .footer {
            width: 100%;
            height: 35px;
            line-height: 35px;
            color: #45a3ff;
            border-top: 1px solid #999999;
            display: flex;
            justify-content: space-between;
        }
        .footer > span {
            cursor: pointer;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <div id="buttom-container">
        <button class="button" onclick="setBlink()">添加持续性闪烁</button>
        <button class="button" onclick="handleReset()">删除持续性闪烁</button>
    </div>
    <div id="oprate-container">
        <div class="head">
            <span>设置</span>
            <span onclick="hideModel()">&#10005;</span>
        </div>
        <div class="oprate-content">
            <div class="oprate-item">
                <span>闪烁颜色：</span>
                <input type="color" name="" value="" id="color">
            </div>
        </div>
        <div class="footer">
            <span onclick="handleSubmit()">确定</span>
        </div>
    </div>
    <div id="left" style="width:100%;height:100%;position:relative;float:left"></div>
    <script id="viewerStartup">
        var model;
        let ids = [];
        let animationId = undefined;
        window.onload = function () {
            var proleft = new CarsView("left", 'csr', exampleModelId, callbackleft, {
            });
            proleft.then(function (value) {
                model = value;
            });
        }
        function callbackleft(nodeNames, nodeIds, position, center, normal) {
            console.log(nodeIds, 'nodeIds');
            ids = nodeIds
        }
        function setBlink () {
            // if (ids.length === 0) return alert('请先选择构件')
            // document.getElementById('oprate-container').style.display = 'block';
            animationId = model.blinkColorAnimationWithForever([5135], 255, 0, 0);
        }
        function hideModel() {
            document.getElementById('oprate-container').style.display = 'none';
        }
        function handleSubmit () {
            const hex = document.getElementById('color').value;
            const red = Number('0x' + hex.substring(1, 3));
            const green = Number('0x' + hex.substring(3, 5));
            const blue = Number('0x' + hex.substring(5, 7));
            animationId = model.blinkColorAnimationWithForever([5135], red, green, blue);
            console.log(animationId, 'animationId');
        }
        function handleReset () {
            model.cancelForeverBlinkAnimation(animationId, [5135]);
            ids = [];
        }
    </script>
</body>
</html>
